<template>
  <div id="search-list">
    <!--搜索框-->
    <Sticky>
      <Search id="searchBox" shape="round" @search="onSearch()" v-model="searchVal" placeholder="请输入搜索关键词">
        <slot slot="left" name="left">
          <div class="revoke">
            <Icon name="revoke" @click="onRevoke()"></Icon>
          </div>
        </slot>
      </Search>
    </Sticky>
    <!--商品框-->
    <div class="search-res">
      <SearchItem v-for="res in searchRes" :item="res" :key="res.id"></SearchItem>
    </div>
  </div>
</template>

<script>
import {Sticky, Icon, Search} from 'vant'
import SearchItem from '../components/SearchItem'

export default {
  name: 'SearchList',
  components: {
    Sticky,
    SearchItem,
    Icon,
    Search
  },
  data () {
    return {
      searchVal: '',
      searchRes: []
    }
  },
  created () {
    this.searchVal = this.$route.params.searchVal
    this.onSearch()
  },
  methods: {
    onSearch () {
      this.searchRes = [
        {
          id: 1,
          name: '出售一张超级帅的死神图片',
          price: 29.9,
          payedNum: 4325,
          address: '广州',
          imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=801475073,2329603026&fm=26&gp=0.jpg'
        },
        {
          id: 2,
          name: '火影忍者',
          price: 30.0,
          payedNum: 2625,
          address: '上海',
          imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F23%2F20180823185723_voqky.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615544654&t=664088a8a8f03909cc2a2576dc86ce0c'
        },
        {
          id: 3,
          name: '想跟我一起去寻找龙珠的秘密吗',
          price: 20.9,
          payedNum: 475,
          address: '深圳',
          imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4002572669,3243905454&fm=26&gp=0.jpg'
        },
        {
          id: 4,
          name: '我就是L',
          price: 19.9,
          payedNum: 7515,
          address: '北京',
          imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=818218123,1668552598&fm=26&gp=0.jpg'
        },
        {
          id: 5,
          name: '过了这村没这店',
          price: 88.8,
          payedNum: 9215,
          address: '东莞',
          imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F7ea7406d87a0c2b22ce29bed0ab6201d74b0b302.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615544952&t=6ab7b707f340352aaaebaeb8af7506db'
        },
        {
          id: 6,
          name: '被支配的恐惧',
          price: 999.0,
          payedNum: 3223,
          address: '佛山',
          imgUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2762516417,1589137703&fm=26&gp=0.jpg'
        }
      ]
    },
    onRevoke () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
  #search-list {
    font-size: 0.5rem;

    .revoke {
      margin-right: 10px
    }

    .search-res {
      margin: 0.2rem 0.2rem 0 0.2rem
    }
  }

</style>
